<!--
 * @Date: 2024-03-21 18:04:35
 * @Auth: 873768511@qq.com
 * @LastEditors: tanjiujiu 873768511@qq.com
 * @LastEditTime: 2024-03-26 16:29:48
 * @FilePath: \dram-web\src\views\PM\list\index.vue
-->
<template>
  <div>
    <TableSearch :columns="columns" :request="handleRequest" ref="tableRef" :showTable="showTable" :handleFilterChange="filterChanged">
      <template #searchData="{ search }">
        <el-row style="margin-bottom: 20px;">
          <el-col :span="16">
            <el-radio-group v-model="search.projectType" @change="handleChange" class="header-btn">
              <el-radio-button label="">全部</el-radio-button>
              <el-radio-button v-for="item in project_type" :label="item.value">{{ item.label }}</el-radio-button>
            </el-radio-group>
          </el-col>
          <el-col :span="8" style="text-align: right;line-height: 30px;">
            <svg-icon class="icon-bth" :icon-class="showTable ? 'table0' : 'card'" @click="showTable = !showTable"></svg-icon>
          </el-col>
        </el-row>
        <el-space>
          <el-form-item label="月份" prop="queryDate">
            <el-date-picker v-model="search.queryDate" type="month" value-format="YYYY-MM" />
          </el-form-item>
        </el-space>
        <el-space>
          <el-form-item prop="itemName" label="项目名称">
            <el-input placeholder="请输入项目名称" v-model="search.itemName" />
          </el-form-item>
        </el-space>
        <el-space>
          <el-form-item prop="projectCode" label="项目编码">
            <el-input placeholder="请输入项目编码" v-model="search.projectCode" />
          </el-form-item>
        </el-space>
        <el-space>
          <el-form-item prop="projectStatus" label="项目阶段">
            <el-select placeholder="请输入项目阶段" v-model="search.projectStatus">
              <el-option v-for="item in project_status" :value="item.value" :label="item.label"></el-option>
            </el-select>
          </el-form-item>
        </el-space>
        <el-space>
          <el-form-item prop="item_type" label="项目类别">
            <el-select placeholder="请输入项目类别" v-model="search.item_type">
              <el-option v-for="item in item_type" :value="item.value" :label="item.label"></el-option>
            </el-select>
          </el-form-item>
        </el-space>
        <el-space>
          <el-form-item prop="projectResults" label="项目结果">
            <el-select placeholder="请输入项目结果" v-model="search.projectResults">
              <el-option v-for="item in project_results" :value="item.value" :label="item.label"></el-option>
            </el-select>
          </el-form-item>
        </el-space>
      </template>
      <template #stage="data">
        <el-tag v-if="data.data.projectResults" :type="getStage(data.data, 'elTagClass') || 'primary'">{{
      getStage(data.data)
    }}</el-tag>
      </template>
      <template #itemType="data">
        <span>{{ getItemType(data.data) }}</span>
      </template>
      <template #projectType="data">
        <span>{{ getProjectType(data.data) }}</span>
      </template>
      <template #amount="data">
        <span>{{ data.data.projectType === '1' ? data.data.purchaseAmount : data.data.totalBudget }}</span>
      </template>
      <template #result="data">
        <!-- <span>{{ data.data.projectResults }}</span> -->
        <el-tag v-if="data.data.projectResults" :type="getResult(data.data, 'elTagClass') || 'primary'">{{
      getResult(data.data)
    }}</el-tag>
      </template>
      <template #dTableRight>
        <el-button type="primary" icon="Plus" @click="dialogVisible = true">新增项目</el-button>
      </template>
      <template #action="data">
        <el-dropdown trigger="click" v-if="data.data.projectResults + '' !== '3'" @command="handleCommand($event,data.data)">
          <span class="el-dropdown-link">
            <span v-if="data.data.projectResults + '' === '1' && data.data.projectStatus + '' === '1'">研究</span>
            <span v-if="data.data.projectResults + '' === '1' && data.data.projectStatus + '' === '3'">开发</span>
            <!-- <span v-if="data.data.projectResults + '' === '1' && data.data.projectStatus + '' === '1'">测试</span> -->
            <span v-if="data.data.projectResults + '' === '1' && data.data.projectStatus + '' === '4'">结项</span>
            <!-- ？开发？？ -->
            <el-icon class="el-icon--right">
              <arrow-down />
            </el-icon>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <!-- <el-dropdown-item command="a">结项</el-dropdown-item> -->
              <el-dropdown-item v-if="data.data.projectResults + '' === '1' && data.data.projectStatus + '' === '3'" command="dev">开发</el-dropdown-item>
              <!-- <el-dropdown-item v-if="data.data.projectResults + '' === '1' && data.data.projectStatus + '' === '3'" command="test">测试</el-dropdown-item> -->
              <el-dropdown-item v-if="data.data.projectResults + '' === '1' && data.data.projectStatus + '' === '1'" command="study">研究</el-dropdown-item>
              <el-dropdown-item command="stop">终止项目</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
        <!-- <el-button size="small" v-if="data.data.projectStatus === 'xmjs'" type="primary" text style="padding:5px 0;"
          @click="handleClick(data.data)">重启</el-button>
        <el-button size="small" type="warning" text style="padding:5px 0;"
          @click="handleClick(data.data)">详情</el-button> -->
        <el-button size="small" type="success" text style="padding:5px 0;" @click="handleEdit(data.data)">编辑</el-button>
        <el-button size="small" type="danger" text style="padding:5px 0;" @click="handleDelete(data.data)">删除</el-button>
      </template>
      <template v-if="!showTable" #tableCard="{ tableData }">
        <el-row :gutter="20" v-loading="loading">
          <el-col :span="6" v-for="item in tableData">
            <el-descriptions class="item_card" :column="1" size="small" label-align="right">
              <template #title>
                <svg-icon icon-class="file" style="font-size:30px;margin-right: 10px;"></svg-icon>
                <span>{{ item.itemName }}</span>
              </template>
              <template #extra>
                <el-icon>
                  <ArrowRightBold />
                </el-icon>
              </template>
              <el-descriptions-item label="预算总额：" label-class-name="desc_label">
                <span>{{ item.projectType === '1' ? item.purchaseAmount : item.totalBudget }}</span>
                <el-tag v-if="item.projectResults" size="small" style="margin-left: 10px;" :type="getResult(item, 'elTagClass') || 'primary'">
                  {{ getResult(item) }}
                </el-tag>
                <div v-if="item.projectType" class="item_card__type" :style="{ backgroundImage: item.itemType === '2' ? label : label1 }">
                  {{ item.itemType === '2' ? '转存' : '无形资产' }}
                </div>
              </el-descriptions-item>
              <el-descriptions-item label="项目编码：" label-class-name="desc_label">{{ item.projectCode
                }}</el-descriptions-item>
              <el-descriptions-item label="项目阶段：" label-class-name="desc_label">
                <el-tag v-if="item.projectStatus" size="small" :type="getStage(item, 'elTagClass') || 'primary'">
                  {{ getStage(item) }}
                </el-tag>
              </el-descriptions-item>
              <el-descriptions-item label="取得方式：" label-class-name="desc_label">{{ getProjectType(item)
                }}</el-descriptions-item>
              <el-descriptions-item :label="item.startTime + ' ~ ' + item.endTime" class-name="desc_label__spec">
                <!-- <svg-icon icon-class="stop" @click="handleClick(item)"></svg-icon> -->
                <!-- <el-icon title="测试" color="#3970e3" @click="handleClick(item)">
                  <SetUp />
                </el-icon>
                <el-icon title="开发" color="#3970e3" @click="handleClick(item)">
                  <Pointer />
                </el-icon> -->
                <!-- <el-icon title="终止" color="#3970e3" @click="handleStop(item)">
                  <VideoPause />
                </el-icon>
                <el-icon title="结项" color="#3970e3" @click="handleClick(item)">
                  <Finished />
                </el-icon> -->
                <el-icon title="编辑" color="#3970e3" @click="handleEdit(item)">
                  <Edit />
                </el-icon>
                <el-icon title="删除" color="#d90313" @click="handleDelete(item)">
                  <Delete />
                </el-icon>
              </el-descriptions-item>
              <!-- <el-descriptions-item label="项目开始时间：" label-class-name="desc_label">{{item.startTime}}</el-descriptions-item>
              <el-descriptions-item label="预计结束时间：" label-class-name="desc_label">{{item.endTime}}</el-descriptions-item> -->
            </el-descriptions>
          </el-col>
          <el-col :span="24" v-if="tableData.length === 0">
            <el-empty description="暂无数据" />
          </el-col>
        </el-row>
      </template>
    </TableSearch>
    <el-dialog title="新增项目" v-model="dialogVisible" width="40%" @close="cancle('dialogForm')">
      <el-form :rules="rules" ref="dialogForm" :model="form" style="padding:20px;">
        <el-form-item prop="type" label="取得方式：">
          <el-radio-group v-model="form.type">
            <el-radio v-for="item in project_type" :label="item.value">{{ item.label }}</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm('dialogForm')">下一步</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script setup name="List">
import {
  getList,
  studyProject
} from '@/api/pm/index'
import { ElMessageBox } from 'element-plus'
import { getDicts } from "@/api/system/dict/data";
import TableSearch from "@/components/Table/tableList.vue";
import label from '../../../assets/images/label.png'
import label1 from '../../../assets/images/label1.png'
const { proxy } = getCurrentInstance()
const { project_status, project_type, project_results, item_type } = proxy.useDict(
  "project_status",
  "project_type",
  "project_results",
  "item_type"
);
const tableRef = ref()
const router = useRouter();
const showTable = ref(true)
const data = reactive({
  form: {
    type: '',
  },
  rules: {
    type: [{ required: true, message: "请选择取得方式", trigger: "change" }],
  }
});
const { form, rules } = toRefs(data);
const loading = ref(false)
const dialogVisible = ref(false)
const dialogForm = ref()
const tableData = ref([])
const columns = [
  // {
  //   type: "index",
  //   fixed: "left",
  //   width: 55, label: "序号"
  // },
  {
    prop: "itemName",
    label: "项目名称",
    minWidth: 120,
  },
  {
    prop: "projectCode",
    label: "项目编码",
    minWidth: 120,
  },
  {
    prop: "projectStatus",
    label: "项目阶段",
    width: 120,
    slotName: 'stage'
  },
  {
    prop: "projectType",
    label: "取得方式",
    width: 120,
    slotName: 'projectType'
  },
  {
    prop: "itemType",
    label: "项目类别",
    width: 120,
    slotName: 'itemType'
  },
  {
    prop: "startTime",
    label: "项目开始时间",
    width: 160,
  },
  {
    prop: "endTime",
    label: "预计结束时间",
    width: 160,
  },
  {
    prop: "totalBudget",
    label: "预算总额（万元）",
    width: 140,
    slotName: 'amount'
  },
  {
    prop: "projectResults",
    label: "项目结果",
    width: 120,
    slotName: 'result'
  },
  {
    label: "操作",
    fixed: 'right',
    width: 200,
    slotName: "action",
  },
  // {
  //   prop: "typeName",
  //   label: "事件类型",
  //   width: 100,
  //   filters: [
  //     { text: "冒装", value: "1" },
  //     { text: "GPS离线行驶", value: "5" },
  //     { text: "三证不全", value: "7" },
  //   ],
  //   columnKey: "eventTypeid",
  //   filterMultiple: false,
  // }
]
// 编辑
function handleEdit (data) {
  router.push({
    path: '/PM/add',
    query: {
      id: data.itemId,
      type: data.projectType,
      flag: 'edit'
    }
  })
}
// 新增
function submitForm (formName) {
  proxy.$refs[formName].validate(valid => {
    if (valid) {
      router.push({
        path: '/PM/add',
        query: {
          type: form.value.type,
          flag: 'add'
        }
      })
    }
  })
}
function handleCommand (val, data) {
  switch (val) {
    case 'stop':
      handleStop(data)
      break;
    case 'study':
      handleStudy(data)
      break;
  }
}
// 研究
function handleStudy (data) {
  router.push({
    path: '/PM/study',
    query: {
      type: form.value.type,
      flag: 'add'
    }
  })
}
// 
function handleStop (data) {
  proxy.$modal.confirm('是否确认删除项目"' + row.itemName + '"').then(function () {
    return // deleteProject(row.itemId);
  }).then(() => {
    tableRef.value.handleSearch();
    proxy.$modal.msgSuccess("终止成功");
  }).catch(() => { });
}
function handleDelete (row) {
  proxy.$modal.confirm('是否确认删除项目"' + row.itemName + '"').then(function () {
    return deleteProject(row.itemId);
  }).then(() => {
    tableRef.value.handleSearch();
    proxy.$modal.msgSuccess("删除成功");
  }).catch(() => { });
}

function formatDate (val) {
  try {
    const date = new Date(val)
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, '0');
    // const day = String(date.getDate()).padStart(2, '0');
    // const hours = String(date.getHours()).padStart(2, '0');
    // const minutes = String(date.getMinutes()).padStart(2, '0');
    // const seconds = String(date.getSeconds()).padStart(2, '0');
    return `${year}-${month}`
  } catch (error) {
    return val
  }
}
function handleRequest (params, done) {
  loading.value = true
  if (!params.projectType) {
    params.projectType = ''
  }
  if (params.queryDate) {
    params.queryDate = formatDate(params.queryDate)
  }
  getList(params).then((res) => {
    tableData.value = res.rows
    console.log(res);
    done({ data: res.rows, total: res.total });
    loading.value = false
  }).catch(() => {
    loading.value = false
  });
};
function getProjectType (data, type = 'label') {
  if (!project_type.value) return
  const obj = project_type.value.find(item => item.value === data.projectType + '')
  return obj[type] || ''
}
function getItemType (data, type = 'label') {
  if (!item_type.value) return
  const obj = item_type.value.find(item => item.value === data.itemType + '')
  return obj[type] || ''
}
function getStage (data, type = 'label') {
  if (!project_status.value) return
  const obj = project_status.value.find(item => item.value === data.projectStatus + '')
  return obj[type] || ''
}
function getResult (data, type = 'label') {
  if (!project_results.value) return
  const obj = project_results.value.find(item => item.value === data.projectResults + '')
  return obj[type] || ''
}
function handleChange () {
  tableRef.value.handleSearch();
};
function filterChanged (value) {
  console.log(value);
  // for (let k in value) {
  //   obj[k] = value[k][0];
  // }

  // tableRef.value.handleSearch(obj);
};
function cancle (formName) {
  form.value.type = ''
  proxy.$refs[formName].resetFields()
}
</script>

<style scoped lang="scss">
.icon-bth {
  cursor: pointer;
  color: #2e57bd;
  font-size: 20px;
}

.el-dropdown {
  height: 24px;
  margin-right: 10px;
  line-height: 24px;
}

.item_card {
  height: 230px;
  background-color: #e3ecff;
  box-shadow: 0 0 6px 2px #e3ecff;
  border-radius: 6px;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.2s;
  position: relative;

  &:hover {
    transform: translate(0, -5px);
  }

  .item_card__type {
    height: 26px;
    width: 80px;
    text-align: center;
    color: #fff;
    font-weight: bold;
    padding-left: 10px;
    font-size: 12px;
    position: absolute;
    right: 0;
    top: 44px;
    background-image: url("../../../assets/images/label1.png");
    background-size: 100% auto;
    background-repeat: no-repeat;
    z-index: 2;
  }

  :deep(.el-descriptions__header) {
    padding: 10px 10px 0;
  }

  :deep(.el-descriptions__title) {
    line-height: 30px;
    font-size: 18px;
    font-weight: bold;
    color: #071024;
    display: flex;
    align-items: center;
    margin-bottom: 0;
  }

  :deep(.desc_label) {
    color: #7896d4;
  }

  :deep(.desc_label__spec) {
    display: inline-block;
    text-align: right;
    width: calc(100% - 150px);

    .el-icon {
      margin-left: 4px;
      font-size: 16px;
    }
  }

  :deep(.el-descriptions__body) {
    border-radius: 6px;
    padding: 10px;
  }
}
</style>